<div [@routerTransition]>
    <div class="m-subheader">
        <div class="row align-items-center">
            <div class="mr-auto col-auto">
                <h3 class="m-subheader__title">
                    <span>市采物资入库管理</span>
                </h3>
            </div>
            <div class="col text-right mt-3 mt-md-0"></div>
        </div>
    </div>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__body">
                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                    <form class="horizontal-form" autocomplete="off">
                        <div class="m-form m-form--label-align-right">
                            <div class="row">
                                <div class="col-md-11">
                                    <div class="row align-items-center">
                                        <div class="input-width">
                                            <div class="form-group m-form__group m-form__group--sm row">
                                                <label class="col-4 col-form-label" for="warehouseNameFilter">仓库:</label>
                                                <div class="col-8">
                                                    <camc-multiSelect class="float-left" id="warehouseNameFilter" [options]="roomOption" name="tadddbdle" [(ngModel)]="selectedWareHouse"
                                                        [style]="{ width: '220px' }" styleClass="form-control" defaultLabel="选择仓库" maxSelectedLabels="1"
                                                        selectedItemsLabel="已选择{0}个仓库">
                                                    </camc-multiSelect>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group m-form__group--sm row">
                                                <label class="col-4 col-form-label" for="supplierFilter"
                                                    >供应商:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="supplierFilter"
                                                        id="supplierFilter"
                                                        [(ngModel)]="supplierFilter"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group m-form__group--sm row">
                                                <label class="col-4 col-form-label" for="materialCodeFilter"
                                                    >物资编码:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="materialCodeFilter"
                                                        id="materialCodeFilter"
                                                        [(ngModel)]="materialCodeFilter"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                        <div class="input-width">
                                            <div class="form-group m-form__group m-form__group--sm row">
                                                <label class="col-4 col-form-label" for="Search_MaterialName"
                                                    >物资名称:</label
                                                >
                                                <div class="col-8">
                                                    <input
                                                        type="text"
                                                        class="form-control m-input"
                                                        name="Search_MaterialName"
                                                        id="Search_MaterialName"
                                                        [(ngModel)]="materialNameFilter"
                                                    />
                                                </div>
                                            </div>
                                        </div>
                                            <div class="input-width">
                                                <div class="form-group m-form__group m-form__group--sm row">
                                                    <label class="col-4 col-form-label" for="selectedPurchaseType">市采类型:</label>
                                                    <div class="col-8">
                                                        <camc-multiSelect class="float-left" id="selectedPurchaseType" [options]="purchaseOption" name="t1abdle"
                                                            [(ngModel)]="selectedPurchaseType" [style]="{ width: '220px' }" styleClass="form-control" defaultLabel="市采类型"
                                                            maxSelectedLabels="1" selectedItemsLabel="已选择{0}个市采类型">
                                                        </camc-multiSelect>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            
                                            <div class="input-width">
                                                <div class="form-group m-form__group m-form__group--sm row">
                                                    <label class="col-4 col-form-label" for="Search_Dept">单据编号:</label>
                                                    <div class="col-8">
                                                        <input type="text" class="form-control m-input" name="Search_Dept" id="Search_Dept" [(ngModel)]="billcode" />
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="input-width">
                                                <div class="form-group m-form__group m-form__group--sm row">
                                                    <label class="col-4 col-form-label" for="Search_MaterialName">单据状态:</label>
                                                    <div class="col-8">
                                                        <camc-dropdown-auto [options]="billStatusOptions" name="billstatus" [(ngModel)]="billstatus" class="float-left width-percent-100"
                                                            >
                                                        </camc-dropdown-auto>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="input-width">
                                                <div class="form-group m-form__group row">
                                                    <label class="col-4 col-form-label" for="f_isCurrentUser">是否本人:</label>
                                                    <div class="col-8">
                                                        <camc-dropdown-auto [options]="operatorOptions" name="f_isCurrentUser" id="f_isCurrentUser" [(ngModel)]="operator"
                                                            class="float-left width-percent-100">
                                                        </camc-dropdown-auto>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="input-width">
                                                <div class="form-group m-form__group row">
                                                    <label class="col-4 col-form-label" for="f_PR_Dept">申购单位:</label>
                                                    <div class="col-8">
                                                        <camc-multiSelect class="float-left" id="f_PR_Dept" [options]="PRDeptOption" name="f_PR_Dept"
                                                            [(ngModel)]="selectedPRDept" [style]="{ width: '220px' }" styleClass="form-control" defaultLabel="请选择申购单位"
                                                            maxSelectedLabels="4" selectedItemsLabel="已选择{0}个申购单位">
                                                        </camc-multiSelect>
                                                    </div>
                                                </div>
                                            </div>
                                    </div>
                                   
                                </div>

                                <div class="col-md-1 m--align-right">
                                    <button (click)="getBills()" class="btn btn-primary m--margin-10" type="submit">
                                        <i class="flaticon-search-1" [attr.aria-label]="l('Search')"></i>查询
                                    </button>

                                    <button (click)="clearQuery()" class="btn btn-primary m--margin-10" type="submit">
                                        清空查询
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>

                    <hr />

                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="m-subheader__title">入库单信息</h4>
                        </div>
                        <div class="col-md-6 m--align-right">
                            <div class="btn-group m-btn-group" role="group" aria-label="...">
                                <button
                                    *ngIf="permission.isGranted('Pages.Market.Into.Create')"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="createOrEditMarketIntoBillModal.show()"
                                >
                                    新增
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Market.Into.Edit')"
                                    [disabled]="selectedBill?.f_BillStatus != '新建'"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="createOrEditMarketIntoBillModal.show(selectedBill.id)"
                                >
                                    编辑
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Market.Into.Delete')"
                                    [disabled]="selectedBill?.f_BillStatus != '新建'"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="deleteBill()"
                                >
                                    删除整单
                                </button>
                                  
                                <button
                                    [disabled]="
                                        selectedBill?.f_BillStatus != '新建' ||
                                        detailPrimengTableHelper.records?.length < 1
                                    "
                                    *ngIf="permission.isGranted('Pages.Market.Into.Submit')"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="submitBill()"
                                >
                                    提交
                                </button>
                                <button
                                    [disabled]="selectedBill?.f_BillStatus != '已提交'"
                                    *ngIf="permission.isGranted('Pages.Market.Into.Post')"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="postBill()"
                                >
                                    过账
                                </button>
                                <button
                                    [disabled]="selectedBill?.f_BillStatus != '已提交'"
                                    *ngIf="permission.isGranted('Pages.Market.Into.Back')"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="sendBackBill()"
                                >
                                    退回
                                </button>

                                <button
                                    *ngIf="permission.isGranted('Pages.Market.Into.Print')"
                                    (click)="printBillList()"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    [disabled]="!selectedBill"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 打印入库单
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Market.Into.PrintAll')"
                                    (click)="printAll()"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    type="button"
                                >
                                    <i nz-icon type="printer" theme="outline"></i> 打印全部
                                </button>
                                <button *ngIf="permission.isGranted('Pages.Tool.Into.PrintAll')"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" type="button">
                                    <excel-import [showIcon]="false" [btnText]="'导入'" (onUpload)="onUpload($event)"></excel-import>
                                </button>
                            </div>
                        </div>

                        <div class="col-md-12 m--margin-top-20">
                            <p-table
                                #dataTable
                                (onLazyLoad)="getBills($event)"
                                [value]="primengTableHelper.records"
                                [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                [paginator]="false"
                                [lazy]="true"
                                [scrollable]="true"
                                ScrollWidth="100%"
                                [responsive]="primengTableHelper.isResponsive"
                                [resizableColumns]="primengTableHelper.resizableColumns"
                                selectionMode="single"
                                [(selection)]="selectedBill"
                                (onRowSelect)="getBillItems()"
                            >
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 40px">
                                            序号
                                        </th>
                                        <ng-container *ngFor="let ext of extensions">
                                            <th width="{{ ext.width }}">
                                                {{ ext.title }}
                                            </th>
                                        </ng-container>
                                    </tr>
                                </ng-template>

                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                    <tr [pSelectableRow]="record">
                                        <td style="width: 40px">
                                            {{ i + 1 + paginator.first }}
                                        </td>
                                        <ng-container *ngFor="let ext of extensions">
                                            <ng-container [ngSwitch]="ext.formatType">
                                                <ng-container *ngSwitchCase="1">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="2">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="4">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchDefault>
                                                    <td width="{{ ext.width }}" [ngClass]="{nowrap:ext.styleTypes[0]==4}">
                                                        {{ record[ext.key] }}
                                                    </td>
                                                </ng-container>
                                            </ng-container>
                                        </ng-container>
                                    </tr>
                                </ng-template>
                            </p-table>

                            <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                                没有数据
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator
                                    [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                    #paginator
                                    (onPageChange)="getBills($event)"
                                    [totalRecords]="primengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage"
                                >
                                </p-paginator>
                                <span class="total-records-count">
                                    {{ 'TotalRecordsCount' | localize: primengTableHelper.totalRecordsCount }}
                                </span>
                            </div>
                        </div>
                    </div>

                    <hr />

                    <div class="row align-items-center">
                        <div class="col-md-6">
                            <h4 class="m-subheader__title">入库详细信息</h4>
                        </div>
                        <div class="col-md-6 m--align-right">
                            <div class="btn-group m-btn-group" role="group" aria-label="...">
                                <button
                                    *ngIf="permission.isGranted('Pages.Market.IntoItem.Create')"
                                    [disabled]="selectedBill?.f_BillStatus != '新建'"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="marketBaseInfoModal.show()"
                                >
                                    新增
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Market.IntoItem.Edit')"
                                    [disabled]="!selectedBillItem || selectedBill?.f_BillStatus != '新建'"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="
                                        createOrEditMarketIntoBillItemModal.show(
                                            selectedBill.id,
                                            selectedBillItem.id,
                                            $event
                                        )
                                    "
                                >
                                    编辑
                                </button>
                                <button
                                    *ngIf="permission.isGranted('Pages.Market.IntoItem.Delete')"
                                    [disabled]="!selectedBillItem || selectedBill?.f_BillStatus != '新建'"
                                    type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="deleteBillItem()"
                                >
                                    删除明细
                                </button>
                                  <button *ngIf="permission.isGranted('Pages.Market.IntoItem.Create')"
                                     [disabled]="!selectedBillItem || selectedBill?.f_BillStatus != '新建'"
                                    type="button" class="btn btn-default m--padding-left-5 m--padding-right-5"
                                        (click)="marketInsertBaseInfoModal.show()">
                                        插入
                                    </button>
                                <button
                                    [disabled]="!selectedBillItem"
                                    type="button"
                                    class="btn btn-default"
                                    (click)="marketIntoBillItemDetailModal.show(selectedBillItem.id)"
                                >
                                    查看详细信息
                                </button>

                                <button 
                                    (click)="moveUp()" 
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" 
                                    [disabled]="!selectedBillItem"
                                    type="button">
                                    <i nz-icon type="printer" theme="outline"></i>
                                    上移
                                </button>
                                <button 
                                    (click)="moveDown()" 
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" 
                                    [disabled]="!selectedBillItem"
                                    type="button">
                                    <i nz-icon type="printer" theme="outline"></i>
                                    下移
                                </button>
                            </div>
                        </div>

                        <div class="col-md-12 m--margin-top-20">
                            <p-table
                                #detailDataTable
                                (onLazyLoad)="getBillItems($event)"
                                [value]="detailPrimengTableHelper.records"
                                [rows]="detailPrimengTableHelper.defaultRecordsCountPerPage"
                                [paginator]="false"
                                [lazy]="true"
                                [scrollable]="true"
                                ScrollWidth="100%"
                                [responsive]="detailPrimengTableHelper.isResponsive"
                                [resizableColumns]="detailPrimengTableHelper.resizableColumns"
                                selectionMode="single"
                                [(selection)]="selectedBillItem"
                            >
                                <ng-template pTemplate="header">
                                    <tr>
                                        <th style="width: 40px">
                                            序号
                                        </th>
                                        <ng-container *ngFor="let ext of detialExtensions">
                                            <th *ngIf='ext.title =="物料编号"' width="{{ ext.width }}" pSortableColumn="f_MaterialCode">
                                                    {{ ext.title }}
                                                    <p-sortIcon field="f_MaterialCode"></p-sortIcon>
                                            </th>
                                            <th width="{{ ext.width }}" *ngIf='ext.title !="物料编号"'>
                                                {{ ext.title }}
                                            </th>
                                        </ng-container>
                                    </tr>
                                </ng-template>

                                <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                    <tr [pSelectableRow]="record">
                                        <td style="width: 40px">
                                            {{ i + 1 + detailPaginator.first }}
                                        </td>
                                        <ng-container *ngFor="let ext of detialExtensions">
                                            <ng-container [ngSwitch]="ext.formatType">
                                                <ng-container *ngSwitchCase="1">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | number: '1.0-0' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="2">
                                                    <td width="{{ ext.width }}" *ngIf="ext.key == 'f_Quantity'" style="text-align:right;">
                                                            {{ record[ext.key] | number: '1.3-3' }}
                                                    </td>
                                                    <td width="{{ ext.width }}" *ngIf="ext.key != 'f_Quantity'" style="text-align:right;">
                                                        {{ record[ext.key] | number: '1.2-2' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchCase="4">
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                    </td>
                                                </ng-container>
                                                <ng-container *ngSwitchDefault>
                                                    <td width="{{ ext.width }}">
                                                        {{ record[ext.key] }}
                                                    </td>
                                                </ng-container>
                                            </ng-container>
                                        </ng-container>
                                    </tr>
                                </ng-template>
                            </p-table>

                            <div class="primeng-no-data" *ngIf="detailPrimengTableHelper.totalRecordsCount == 0">
                                没有数据
                            </div>
                            <div class="primeng-paging-container">
                                <p-paginator
                                    [rows]="detailPrimengTableHelper.defaultRecordsCountPerPage"
                                    #detailPaginator
                                    (onPageChange)="getBillItems($event)"
                                    [totalRecords]="detailPrimengTableHelper.totalRecordsCount"
                                    [rowsPerPageOptions]="detailPrimengTableHelper.predefinedRecordsCountPerPage"
                                >
                                </p-paginator>
                                <span class="total-records-count">
                                    {{ 'TotalRecordsCount' | localize: detailPrimengTableHelper.totalRecordsCount }}
                                    金额合计: {{ totalprice }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <createOrEditMarketIntoBillModal
        #createOrEditMarketIntoBillModal 
        (clearQuery)="clearQuery()"
        (modalSave)="getBills()"
    ></createOrEditMarketIntoBillModal>
    <createOrEditMarketIntoBillItemModal
        #createOrEditMarketIntoBillItemModal
        (clearQuery)="clearQuery()"
        (modalSave)="getBillItems()"
    ></createOrEditMarketIntoBillItemModal>
    <marketBaseInfoModal
        #marketBaseInfoModal
        (modalSave)="createOrEditMarketIntoBillItemModal.show(this.selectedBill.id, undefined, $event)"
    ></marketBaseInfoModal>
    <marketBaseInfoModal #marketInsertBaseInfoModal 
    (modalSave)="insertmarket(this.selectedBill.id, $event)"></marketBaseInfoModal>
    <marketIntoBillItemDetailModal #marketIntoBillItemDetailModal></marketIntoBillItemDetailModal>
</div>
